<template>
  <div class="flex card-box items-center">
    <div class="image">
      <img :src="item.icon" />
    </div>
    <div class="content">
      <div class="name">{{ item.name }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="scss" scoped>
.card-box {
  background-color: #fff;
  box-shadow: 0px 8px 20px 0px rgba(134, 154, 183, 0.08);
  border-radius: 14px;
  padding: 14px 0;
  padding-left: 10%;
  .image {
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    padding-left: 10px;
    .name {
      font-size: 13px;
      color: #565b66;
    }
    .value {
      font-family: OPPOSans, OPPOSans;
      font-weight: normal;
      font-size: 16px;
      color: #212429;
    }
  }
}
</style>
